<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H&M</title>
    
    <link rel="stylesheet" href="../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap-3.3.7-dist/css/reset.css">
    <link rel="stylesheet" href="../plugins/bootstrap-3.3.7-dist/css/main.css">
   
  

    <style>
        #touxiang{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
    </style>

</head>
<body>


<!-- 导航begin -->
<div class="container-fluid">
    <div class="row">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="container-fluid"> 
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"></a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-home"></span>首页</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-lock"></span>登陆</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-check"></span>注册</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>我的购物车</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>个人中心</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-off"></span>安全退出</a></li> 
                
                <!-- 在用框架的使用，任何一个标签都会存在一些样式 -->
                <li><img src="../images/头像.png" id="touxiang"></li>
            </ul>
        </div>
        </div>
    </nav>
    </div>
</div>



<!--背景色-->
<div class="bg">

    <div align="center">

        <a href="../work/店家.html"><img src="../images/HM.png"></a>
    </div>




    <!--=======================================产品详情=======================================-->
 
        <div class="container">
           

            <div class="details-display clearfix">
                <div class="leftBar imgBox">
                   
                    
                        <a class="jqzoom" href="javascript: void (0)"><img jqimg="../images/details.JPG" src="../images/主图.jpg" alt=""/></a> 
                    
                    
                </div>
                <div class="leftBar textBox">
                    <h4 class="title">HM女装2019秋冬新款半高领针织衫女套头宽松上衣女长袖 0801309</h4>
                    <div class="bigImg-title clearfix">
                    
                        <div class="clearfix">
                            <span class="leftBar">活动价</span>
                            <strong class="leftBar">￥149.00</strong>
                           
                        </div>
                       
                    </div>
                    <ul class="send-addr">
                        <li>
                            <span>配 送 至 ：</span>
                            <div class="chose-addr">
                                <a href="javascript: void (0)">上海省</a>
                            </div>
                            <span>包邮 &nbsp;有货</span>
                        </li>
                        <li>
                            <span>顾客评分：</span>
                            <p class="grade"><span>4.9分</span></p>
                           
                        </li>
                    </ul>

                    <ul class="details-content clearfix">
                        <li><p>品牌商家：</p><p>H&M</p></li>
                        <li><p>上市年份/季节：</p><p>2019年秋季</p></li>               
                        <li><p>货号：</p><p> 0801309</p></li>
                        <li><p>厚薄：</p><p>常规</p></li>
                        <li><p>适用年龄：</p><p> 25-29周岁</p></li>
                        <li><p>款式：</p><p>套头</p></li>
                        <li><p>街头：</p><p>欧美</p></li>
                       
                        
                        
                    </ul>

                    <ul class="chose-num">
                        <li>
                            <p>我要购买：</p>
                            <input type="number" value="1" min="1" max="1000"/>件
                        </li>

                        <li>
                            <a href="javascript: void (0)"><img src="../images/b1.png" alt=""/></a>
                            <a href="javascript: void (0)"><img src="../images/b2.png" alt=""/></a>
                        </li>
                    </ul>
                </div>
                <div class="leftBar seenBox">
                    <ul>
                        <li class="seenBox-title">浏览过本品的用户还浏览过</li>
                        <li>
                            <div class="seenImg">
                                <img src="../images/r1.jpg" alt="" width="150" />
                                <p>￥265.00</p>
                            </div>
                            <a href="javascript: void (0)">女装棉衣棉服2019冬季新款面包服外套女情侣款</a>
                        </li>
                        <li>
                            <div class="seenImg">
                                <img src="../images/r2.jpg" alt="" width="150"/>
                                <p>￥165.00</p>
                            </div>
                            <a href="javascript: void (0)">装2019年新款翻领针织衫秋季新款女</a>
                        </li>
                        <li>
                            
                        </li>
                    </ul>
                </div>
            </div>
        </div>
   

    

    <!--=======================================商品详情、售后服务等等==========================-->

    
        <div class="container">
           <div class="leftBar details-left">
               <ol class="package-title package1-title">
                   <li class="active"><a href="#detail">商品详情</a></li><li><a href="#comment">用户评价</a></li>
               </ol>
               <div id="detail" class="des detail part">
                 
                   <img src="../images/d1.jpg" alt="">
                 
                   <img src="../images/d2.jpg" alt="">

                   <img src="../images/d3.jpg" alt="">

                   <img src="../images/d4.jpg" alt="">
                   
                   <img src="../images/d5.jpg" alt="">

                   <img src="../images/d6.jpg" alt="">
                  
           
               </div>

<!--==========================================客户评价================================-->
               <div id="comment" class="des comment part">
                   <img src="../images/coms.png" alt="">
                   <div class="comment-info">
                       <div class="clearfix">
                           <p class="comment-con leftBar">很喜欢，可以和朋友一起买.</p>
                           <p class="name rightBar">jackson</p>
                       </div>
                       <p class="time">2019.12.21</p>

                       <div class="clearfix">
                        <p class="comment-con leftBar">很合身，穿着舒服.</p>
                        <p class="name rightBar">tom</p>
                    </div>
                    <p class="time">2019.12.21</p>
                    <div class="clearfix">
                        <p class="comment-con leftBar">跟闺蜜一块买的，颜色太喜欢了.</p>
                        <p class="name rightBar">kitty</p>
                    </div>
                    <p class="time">2019.12.21</p>
                   </div>
               </div>
           </div>

            <!--==========================相关商品推荐========================-->
            <div class="leftBar details-right">
                <h5>相关商品推荐</h5>
                <dl class="clearfix">
                    <dt class="leftBar"><a href="javascript: void (0)"><img src="../images/r3.jpg" alt=""></a></dt>
                    <dd class="rightBar">
                        <a href="javascript: void (0)">2019新款长袖薄款宽松针织套衫女</a>
                        <p>￥69.00 <del>￥176.00</del></p>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt class="leftBar"><a href="javascript: void (0)"><img src="../images/r4.jpg" alt=""></a></dt>
                    <dd class="rightBar">
                        <a href="javascript: void (0)">2019秋冬新款针织衫女套头宽松长袖上衣</a>
                        <p>￥69.00 <del>￥176.00</del></p>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt class="leftBar"><a href="javascript: void (0)"><img src="../images/r5.jpg" alt=""></a></dt>
                    <dd class="rightBar">
                        <a href="javascript: void (0)">女装情侣款2019新款休闲宽松女士百搭柔软毛绒外套女 </a>
                        <p>￥69.00 <del>￥176.00</del></p>
                    </dd>
                </dl>
                <dl class="clearfix">
                    <dt class="leftBar"><a href="javascript: void (0)"><img src="../images/r6.jpg" alt=""></a></dt>
                    <dd class="rightBar">
                        <a href="javascript: void (0)">女装2019秋冬新款西门大嫂针织上衣网红同款圣诞针织衫</a>
                        <p>￥69.00 <del>￥176.00</del></p>
                    </dd>
                </dl>
            </div>
        </div>


    

    






<script src="../plugins/bootstrap-3.3.7-dist/js/jquery-1.11.0.min.js"></script>
<script src="../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script src="../plugins/bootstrap-3.3.7-dist/js/main.js"></script>
</body>
</html>